/*
  author:li
  date:2017-12-04
  des:这个是相关推荐模块
 */
<template>
  <div class="father">
    <div class="recommend">
        <div class="recommend-title">
              <span>一 产品推荐 一</span>
              <router-link :to="{path:'/main/recommentproduct'}">
                      <span class="recommend-title-right">更多推荐<i class="iconfont icon-jiankuohaoxiyou"></i></span>
              </router-link>
        </div>
        <div class="recommend-content clearfix">
            <ul>
              <li v-for="(item,index) in recommendList" :key="index" @click="goDetail(item.platformId,index)">
                <div class="recommend-content-log">
                   <img :src="item.logo"  alt="贷款">
                </div>
                <p class="recommend-content-title">{{item.abbreviation}}</p>
                <div class="recommend-content-memoy">
                   <p><span>¥</span><span>{{item.quato}}</span></p>
                   <span class="recommend-content-memoy-range">额度范围&nbsp;(元)</span>
                </div>
                <div class="recommend-content-apply">
                    立即申请
                </div>
              </li>
            </ul>
        </div>
    </div>
     <div class="messagess" v-if="consult==1">
        <div class="messagess-title">
              <span>一 资讯推荐 一</span>
                <router-link :to="{path:'/main/discover/selected'}">
                     <span class="messagess-title-right">更多推荐<i class="iconfont icon-jiankuohaoxiyou"></i></span>
                </router-link>
        </div>
        <div class="messagess-content clearfix">
            <ul>
              <li v-for="(item,index) in messagessList" :key="index" @click="goArtical(item.cmsId)">
                <div class="messagess-content-image">
                   <img :src="item.img"  alt="贷款">
                </div>
                <p>{{item.title}}</p>
              </li>
            </ul>
        </div>
  </div>
  </div>
</template>
<script> 
import { dateFormat, LoadMore, cookie } from 'vux'
export default {
  name:"recommend",
  props:['consult'],
   data(){
     return {
        recommendList:[],
        messagessList:[],
          token: "",
     }
   },
   mounted(){
     if(this.consult==1){
        let messagessid=this.$route.query.id;
        this.$http.get("/loansupermarket-app/information/getInformationMoreList?cmsId="+messagessid)
        .then((response)=>{
              console.log(response);
              var resBody = response.body;
              if (resBody.code == '000') {
                // 如果接口请求成功列表实例化
                this. messagessList = resBody.data;
                console.log( this.recommendList);
              } else {
                MessageBox.alert(resBody.mesg);
              }
        });
        this.recommendList=[]; //防止上一次数据的重叠现象
        this.recommend( messagessid);
     }
     else{
         let recommendid=this.$route.query.id;
         this.recommend(recommendid)
     }
   },
   methods:{
        recommend(id){  //产品的相关推荐
          this.$http.get("/loansupermarket-app/platform/getProductRecommendation?platformId="+id)
          .then((response)=>{
                console.log(response);
                var resBody = response.body;
                if (resBody.code == '000') {
                  // 如果接口请求成功列表实例化
                  this.recommendList = resBody.data;
                  console.log( this.recommendList);
                } else {
                  MessageBox.alert(resBody.mesg);
                }
          });
        },
        goDetail(id, index) {  //这个是产品相关推荐
          this.$http
            .post("/loansupermarket-app/platform/visitCount", {
              token: this.token,
              starPlatformId: index + 1,
              phone:window.sessionStorage.getItem('phone'),
              channel:window.sessionStorage.getItem('channel')?window.sessionStorage.getItem('channel'):''
            })
            .then(function(response) {
              if (response.body.code == "000") {
                this.$router.push({
                  path: "/loanplatformdetail",
                  query: { id, id, status: 2 }
                });
              }
              //this.$router.go(0);
            });
            this.$emit('Recommendid',id); //将我的值传个我的父组件
        },
        goArtical(id) { 
            var token = cookie.get('token');
            let postData = { 
                visitType: 1, 
                informationId: id, 
                token: token ,
                channel:window.sessionStorage.getItem('channel')?window.sessionStorage.getItem('channel'):''
                }
            this.$http.post('/loansupermarket-app/information/insertInformationVisit', postData).then(function(response) {
                if (response.body.code == '000') {
                    this.$router.push({ path: '/main/mine/mydiscover/messageselected', query: { id: id } })
                } 
            })
            //this.$router.go(0);  
        }
   }
}
</script>

<style lang="scss" scoped>
@import '../scss/variable/base.scss';
.recommend{
  padding: 0px rem(30);
  &-title{
    position: relative;
    box-sizing: border-box;
    margin-bottom: rem(30);
    font-size: rem(32);
    font-weight: bold;
    color: #333333;
    &-right{
      position: absolute;
        right: 0px;
      font-weight: normal;
      color:#00dada;
      font-size: rem(26); 
    }
  }
  &-content{
    //margin-top:1rem;
    box-sizing: border-box;
        li{
          position: relative;
            box-sizing: border-box;
            width:rem(330);
            height: rem(300);
            background:white; 
            float: left;
            margin:0.6rem 3px;
            border-radius:8px;
            .recommend-content-log{
               position: absolute;
               top: -0.75rem;
               left: 50%;
               margin-left: -0.75rem;
              border-radius: 50%;
               width:1.5rem;
               height:1.5rem;
               img{
                  border-radius: 50%;
                 width: 100%;
                 height:100%;
                 display: block;
               }
            } 
            .recommend-content-title{
                margin-top:0.8rem;
                font-size: rem(30);
                color: #333333;
            }
            .recommend-content-memoy{
              p{
                margin: rem(10) 0px;
                font-size: rem(40);
                color: #ff5b52;
                span:nth-of-type(1){
                  padding-right:2px; 
                   font-size: rem(30);
                }
              }
              &-range{
                font-size:rem(24);
                color: #999999;
              }
            }
            .recommend-content-apply{
              position: absolute;
              bottom: 0px;
                width: 100%;
                height:rem(70);
                font-size: 0.42rem;
                background: -webkit-linear-gradient(left, #2ce9e8, #7dd7ff) !important;
                box-shadow: 0 -6px 6px rgba(255, 255, 255, 0.6);
                color: #fff;
                line-height:rem(70);
                 border-radius:0 0 8px 8px;
                &:active {
                  background: #46d7db;
                }
            }
        }
  }
}
.messagess{
   padding: 0px rem(30);
    &-title{
    position: relative;
    box-sizing: border-box;
   margin-bottom:rem(20);
    font-size: rem(32);
    font-weight: bold;
    color: #333333;
    &-right{
      position: absolute;
      right: 0px;
      font-weight: normal;
      color:#00dada;
      font-size: rem(26); 
    }
  }
  &-content{
      li{
          width:rem(330);
          height: rem(280);
          float: left;
           margin:0 3px 0.5rem 3px;
           //background:white;
           .messagess-content-image{
             width:rem(330);
             height: rem(236);
              img{
                border-radius: 8px;
                width:100%;
                height: 100%;
                display: block;
              }
           }
           p{
             margin-top: 4px;
             text-align: left;
             font-size: rem(28);
             color: #333333;
            // 表示的意思的如果文字超过了一行的话，就省略...
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
              -webkit-line-clamp:1;
              -webkit-box-orient:vertical;
           }
      }
    }

}
</style>

